<template>
    <div>
		<div class="table_wrap">
			<div class="page-title">
                <h3>{{title}}</h3>
            </div>
			<Tables 
                class="style_c" 
                :title="'真实IP网段配置'"  
                :tableName="'rip'" 
                :butns='butns' 
                :field='field'
                :tableData='ripTableData' 
                :curPage="rip_cur_page" 
                :pageSize="pageSize"
                :perNum='rip_size' 
                :totalNum="rip_total_num"
                :collectField="collect_field"  
                :clearSelectItems="selectedItems" 
                @reset="reset"  
                :rankable="true"
                @rankData="handleRankData"
                @loadData="_getRealIpRange" 
                @sentSelectedItems="getSelectedItems" 
                @sentEditData="getEditData"
                @changePageSize='handleChangePageSize'>
			</Tables>
			<Tables 
                class="style_c"  
                :title="'真实IP保留网段配置'" 
                :tableName="'norip'" 
                :butns='butns' 
                :field='field'
                :tableData='noripTableData' 
                :pageSize="pageSize"
                :curPage="norip_cur_page" 
                :perNum='norip_size'
                :totalNum="norip_total_num" 
                :collectField="collect_field" 
                :clearSelectItem1="selectedItem1" 
                @reset="reset"  
                :rankable="true"
                @rankData="handleRankData"
                @loadData="_getRealIpReservedRange" 
                @sentSelectedItem1="getSelectedItem1"
                @sentEditData="getEditData"
                @changePageSize='handleChangePageSize'>
			</Tables>
		</div>
        
        <Modals 
            :id="'modal'" 
            :title="add_title" 
            :field='field' 
            :collectField="collect_field"
            :selectItem="select_item" 
            :status="status" 
            :errorMsg="errorMsg" 
            :type="type"
            :selectedItems="table_name === 'rip' ? selectedItems : selectedItem1" 
            :editData="edit_data" 
            @sentErrorMsg="getErrorMsg"
            @addEvent="handleAddRip"
            @editEvent="handleEditRip"
            @delEvent="handleDelRip"
        >
        </Modals>
    </div>
</template>
<script>
import Tables from 'components/common/Tables'
import Modals from 'components/common/Modals'
import NetService from 'services/netService'
import SystemService from 'services/systemService'
import PageData from 'libs/PageData'

let field = [
    {
        type: 'checkbox',
    },
    {
        type: 'rank',
    },
    {
        type: 'ipinput',
        label: '网段',
        name: 'ip',          
        regex: /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/,
        requried: true, 
        remark: '*必填'
    },
    {
        type: 'ipinput',
        label: '掩码',
        name: 'mask',
        regex:  /^(254|252|248|240|224|192|128|0)\.0\.0\.0$|^(255\.(254|252|248|240|224|192|128|0)\.0\.0)$|^(255\.255\.(254|252|248|240|224|192|128|0)\.0)$|^(255\.255\.255\.(255|254|252|248|240|224|192|128|0))$/ ,
        requried: true, 
        remark: '*必填'  
    },
    {
        type: 'text',
        label: 'VLAN',
        name: 'vlan_id',
        regex:  /^\d$|^[1-9]\d{0,2}$|^[1-3]\d{3}$|^40\d[0-4]$/,
        requried: true, 
        remark: '*必填(0~4094的整数)'  
    },
    {
        type: 'select',
        label: '物理线路',
        name: 'group_id',
        requried: true, 
        remark: '*必选'   
    }
]

export default {
    components: {
        Tables,
        Modals
    },
    data() {
        return{
            title: '网络配置',   
            add_title: '',  
            field: field,
            butns: [
                {
                    type: 'add',
                    name: '添加',
                    event: 'addEvent',
                    icon: `/static/img/add.png`,
                    class: 'add_btn',
                },
                {
                    type: 'del',
                    name: '删除',
                    event: 'delEvent',
                    icon: `/static/img/delete.png`,
                    class: 'del_btn',
                },
                {
                    type: 'edit',
                    name: '编辑',
                    event: 'editEvent',
                    icon: `/static/img/modpic.png`,
                    class: 'edit_btn',
                }
            ],
            pageSize: [10, 20, 40, 80],
            cur_page: 1,             
            status: "",
            errorMsg: '',
            type: '',
            edit_data: {},

            select_item: [],
            collect_field: 'id',
            table_name: '',

            rip_cur_page: 1,
            rip_size: 10,
            rip_total_num: 0,
            ripTableData: [],    
            selectedItems: [],

            norip_cur_page: 1,
            norip_size: 10,
            norip_total_num: 0,
            noripTableData: [],
            selectedItem1: [],
            
            rip_order: 'desc',
            rip_by: '',
            norip_order: 'desc',
            norip_by: ''
        }
    },
    mounted() {
        let params = {
            oper: 'load',
            page:  1
        }
        // this.loadNoripData(params)
        this._getRealIpRange({
            oper: 'load',
            page: this.rip_cur_page,
            size: this.rip_size,
            order: this.rip_order,
            by: this.rip_by
        })
        this._getRealIpReservedRange({
            oper: 'load',
            page: this.norip_cur_page,
            size: this.norip_size,
            order: this.norip_order,
            by: this.norip_by
        })
        this._getLine() 
    },
    methods: {
        handleAddRip(params) {
            params.group_id = params.group_id.replace(/[^0-9]/ig, "") 
            if (this.table_name === 'rip') {
                params.oper = params.oper + "_rip"
                this._createRealIpRange(params)
            } else {
                params.oper = params.oper + "_norip"
                this._createRealIpReservedRange(params)
            }
        },
        handleEditRip(params) {
            params.group_id = params.group_id.replace(/[^0-9]/ig, "") 
            if (this.table_name === 'rip') {
                params.oper = params.oper + "_rip"
                this._updateRealIpRange(params)
            } else {
                params.oper = params.oper + "_norip"
                this._updateRealIpReservedRange(params)
            }
        },
        handleDelRip(params) {
            if (this.table_name === 'rip') {
                params.oper = params.oper + "_rip"
                this._destroyRealIpRange(params)
            } else {
                params.oper = params.oper + "_norip"
                this._destroyRealIpReservedRange(params)
            }
        },
        getErrorMsg(msg) {
            this.errorMsg = msg
        },
        getSelectedItems(selectedItems) {
            this.selectedItems = selectedItems
        },
        getSelectedItem1(selectedItem1) {
            this.selectedItem1 = selectedItem1
        },
        getEditData(editdata) {
            this.edit_data = editdata 
        },
        reset(type, table_name) {
            this.status = ""
            this.errorMsg = ''
            this.type = type
            this.table_name = table_name
            if (table_name === 'norip') {     
                this.add_title = "真实IP保留网段"
            } else {
                this.add_title = "真实IP网段"
            } 
            $('.inputs_wrap .error_foramt').removeClass('error_foramt')
        },
        handleRankData(params, tableName) {
            if (tableName === 'rip') {
                params.page = this.rip_cur_page
                params.size = this.rip_size
                this.rip_order = params.order 
                this.rip_by = params.by
                this._getRealIpRange(params)
            } else {
                params.page = this.norip_cur_page
                params.size = this.norip_size
                this.norip_order = params.order
                this.norip_by = params.by
                this._getRealIpReservedRange(params)
            }
        },
        handleChangePageSize(page, size, tableName) {
            if (tableName === 'rip') {
                this.rip_cur_page = page
                this.rip_size = size
                let params = {
                    page: this.rip_cur_page,
                    size: this.rip_size,
                    order: this.rip_order,
                    by: this.rip_by
                }
                this._getRealIpRange(params)
            } else {
                this.norip_cur_page = page
                this.norip_size = size
                this._getRealIpReservedRange({
                    page: this.norip_cur_page,
                    size: this.norip_size,
                    order: this.norip_order,
                    by: this.norip_by
                })
            }
        }, 
        _getRealIpRange(params) {
            this.status = 'ing'  
            NetService.getRealIpRange(params)
            .then((res) => {
                if (res.errcode === 0) {
                    this.status ='ok'
                    let data = res['9'].data     
                    this.rip_total_num = new PageData(data, this.rip_size).totalpage
                    let cur_page_date =  new PageData(data, this.rip_size).data(params.page)
                    let page = params.page ? params.page : this.rip_cur_page

                    if (!params.oper) {
                        params.oper = 'load'
                    }
                    if (params.oper.indexOf('add') >= 0) {//添加完到最新一页
                        page = this.rip_total_num
                    } else if (params.oper.indexOf('del') >= 0 && 
                                cur_page_date.length === 0 && page > 1) {//删除后当前页无数据，跳到前一页
                        page--
                    }
                    if (params.oper.indexOf('del') >= 0 || params.oper.indexOf('edit') >= 0) {
                        this.selectedItems = []      
                    }
                    this.rip_cur_page = page
                    this.ripTableData =  new PageData(data, this.rip_size).data(page).map((item)=> { 
                        return {
                            id: item.id,
                            ip: item.ip,
                            mask: item.mask,
                            vlan_id: item.vlan_id,
                            group_id: '线路' + item.group_id
                        }
                    })
                } else {
                    this.status ='error'
                    this.errorMsg = res.errorMessage
                }
            })
        },
        _createRealIpRange(params) {
            params = {
                9: `${params.ip}|${params.mask}|${params.vlan_id}|${params.group_id}`
            }
            NetService.createRealIpRange(params)
               .then((res) => {
                    if (res.errcode === 0) {
                        this.$Message.success({
                            closable: true,
                            content: '添加成功！',
                            duration: 5
                        })
                        this._getRealIpRange(params)
                    }
              })
        },
        _updateRealIpRange(params) {
            params = {
                9: `${params.id}|${params.ip}|${params.mask}|${params.vlan_id}|${params.group_id}`
            }
            NetService.updateRealIpRange(params)
                .then((res) => {
                    if (res.errcode === 0) {
                        this.$Message.success({
                            closable: true,
                            content: '修改成功！',
                            duration: 5
                        })
                        this._getRealIpRange(params)
                    }
                })
        },
        _destroyRealIpRange(params) {
            params = {
                9: params.ids
            }
            NetService.destroyRealIpRange(params)
                .then((res) => {
                    if (res.errcode === 0) {
                        this.$Message.success({
                            closable: true,
                            content: '删除成功！',
                            duration: 5
                        })
                        this._getRealIpRange(params)
                    }
                })
        },
        _getRealIpReservedRange(params) { 
            this.status ='ing'  
            NetService.getRealIpReservedRange(params)
            .then((res) => {
                if (res.errcode === 0) {
                    this.status ='ok'  
                    let data =  res['10'].data
                    this.norip_total_num = new PageData(data, this.norip_size).totalpage
                    let cur_page_date =  new PageData(data, this.norip_size).data(params.page)
                    let page = params.page ? params.page : this.norip_cur_page

                    if (!params.oper) {
                        params.oper = 'load'
                    }
                    if (params.oper.indexOf('add') >= 0 || params.oper.indexOf('edit') >= 0) {//添加完到最新一页
                        page = this.norip_total_num
                    } else if (params.oper.indexOf('del') >= 0 && 
                                cur_page_date.length === 0 && page > 1) {//删除后当前页无数据，跳到前一页
                        page--
                    }
                    if (params.oper.indexOf('del') >= 0 || params.oper.indexOf('edit') >= 0) {
                        this.selectedItem1 = []
                    }
                    this.norip_cur_page = page
                    this.noripTableData =  new PageData(data, this.norip_size).data(page).map((item)=> { 
                        return {
                            id: item.id,
                            ip: item.ip,
                            mask: item.mask,
                            vlan_id: item.vlan_id,
                            group_id: '线路' + item.group_id
                        }
                    })	
                } else {
                    this.status ='error'
                    this.errorMsg = res.errorMessage	
                }
            })
        },
        _createRealIpReservedRange(params) {
            params = {
                10: `${params.ip}|${params.mask}|${params.vlan_id}|${params.group_id}`
            }
            NetService.createRealIpReservedRange(params)
               .then((res) => {
                    if (res.errcode === 0) {
                        this.$Message.success({
                            closable: true,
                            content: '添加成功！',
                            duration: 5
                        })
                        this._getRealIpReservedRange(params)
                    }
              })
        },
        _updateRealIpReservedRange(params) {
            params = {
                10: `${params.id}|${params.ip}|${params.mask}|${params.vlan_id}|${params.group_id}`
            }
            NetService.updateRealIpReservedRange(params)
                .then((res) => {
                    if (res.errcode === 0) {
                        this.$Message.success({
                            closable: true,
                            content: '修改成功！',
                            duration: 5
                        })
                        this._getRealIpReservedRange(params)
                    }
                })
        },
        _destroyRealIpReservedRange(params) {
            params = {
                10: params.ids
            }
            NetService.destroyRealIpReservedRange(params)
                .then((res) => {
                    if (res.errcode === 0) {
                        this.$Message.success({
                            closable: true,
                            content: '删除成功！',
                            duration: 5
                        })
                        this._getRealIpReservedRange(params)
                    }
                })
        },
        _getLine() {
            SystemService.getLine()
                .then((res) => {
                    if (res.errcode === 0) {
                        this.select_item = res.group_id.map((item)=>{
                            return  '线路' + item
                        })
                    }
                })
        },
        popoverShow(ele,content) {//删除弹窗
            $(ele).attr({
                'data-toggle': 'popover',
                'data-placement':"bottom",
                'data-content': content
            }).popover('show')
            setTimeout(function() {
                $(ele).popover('destroy')
            }, 1500)
        },
    }
}
</script>
<style scoped lang="less">
.table_wrap{
    background: #ffffff;
    margin: 30px;
}
</style>